<template>
  <div>
    <top></top>

    <div class="w">
      <div class="userinfo">
        <div class="userinfo-title">My Account</div>
        <div class="userinfo-info">
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-user"></i>
            </label>
            <label class="userinfo-item-tag"> Name: </label>
            <label class="userinfo-item-var" id="username"
              >{{ account.accountId }}
            </label>
            <input
              type="text"
              class="input-fix"
              id="fix-username"
              name="username"
            />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-signature"></i>
            </label>
            <label class="userinfo-item-tag"> First Name: </label>
            <label class="userinfo-item-var" id="first-name">
              {{ account.firstName }}
            </label>
            <input
              type="text"
              class="input-fix"
              id="fix-firstname"
              name="firstname"
            />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-signature"></i>
            </label>
            <label class="userinfo-item-tag"> Last Name: </label>
            <label class="userinfo-item-var" id="second-name">
              {{ account.lastName }}
            </label>
            <input
              type="text"
              class="input-fix"
              id="fix-secondname"
              name="lastname"
            />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-envelope"></i>
            </label>
            <label class="userinfo-item-tag"> Email: </label>
            <label class="userinfo-item-var" id="email">
              {{ account.email }}
            </label>
            <input type="text" class="input-fix" id="fix-email" name="email" />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-earth-americas"></i>
            </label>
            <label class="userinfo-item-tag"> Country: </label>
            <label class="userinfo-item-var" id="country">
              {{ account.country }}
            </label>
            <select class="input-fix" id="fix-country" name="country">
              <option value="China" select="selected">China</option>
              <option value="England">England</option>
              <option value="America">America</option>
              <option value="Russia">Russia</option>
              <option value="France">France</option>
            </select>
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-map-location-dot"></i>
            </label>
            <label class="userinfo-item-tag"> State: </label>
            <label class="userinfo-item-var" id="state">
              {{ account.state }}
            </label>
            <select class="input-fix" id="fix-state" name="state">
              <option value="">--请选择--</option>
              <!-- <option value="Anhui">Anhui</option>
                    <option value="Beijing">Beijing</option>
                    <option value="Fujian">Fujian</option>
                    <option value="Gansu">Gansu</option>
                    <option value="Guangdong">Guangdong</option>
                    <option value="Guangxi">Guangxi</option>
                    <option value="Guizhou">Guizhou</option>
                    <option value="Hainan">Hainan</option>
                    <option value="Hebei">Hebei</option>
                    <option value="Henan">Henan</option>
                    <option value="Heilongjiang">Heilongjiang</option>
                    <option value="Hubei">Hubei</option>
                    <option value="Hunan">Hunan</option>
                    <option value="Jilin">Jilin</option>
                    <option value="Jiangsu">Jiangsu</option>
                    <option value="Jiangxi">Jiangxi</option>
                    <option value="Liaoning">Liaoning</option>
                    <option value="Inner Mongoria">Inner Mongoria</option>
                    <option value="Ningxia">Ningxia</option>
                    <option value="Qinghai">Qinghai</option>
                    <option value="Shandong">Shandong</option>
                    <option value="Shanxi">Shanxi</option>
                    <option value="Shaanxi">Shaanxi</option>
                    <option value="Shanghai">Shanghai</option>
                    <option value="Sichuan">Sichuan</option>
                    <option value="Tianjing">Tianjing</option>
                    <option value="Tibet">Tibet</option>
                    <option value="Xinjiang">Xinjiang</option>
                    <option value="Yunnan">Yunnan</option>
                    <option value="Zhejiang">Zhejiang</option>
                    <option value="Chongqing">Chongqing</option>
                    <option value="Macao">Macao</option>
                    <option value="Hong Kong">Hong Kong</option>
                    <option value="Taiwan">Taiwan</option> -->
            </select>
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-city"></i>
            </label>
            <label class="userinfo-item-tag"> City: </label>
            <label class="userinfo-item-var" id="city">
              {{ account.city }}
            </label>
            <select class="input-fix" id="fix-city" name="city">
              <option value="">--请选择--</option>
            </select>
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-location-dot"></i>
            </label>
            <label class="userinfo-item-tag"> Address1: </label>
            <label class="userinfo-item-var" id="address1">
              {{ account.address1 }}
            </label>
            <input
              type="text"
              class="input-fix"
              id="fix-address1"
              name="address1"
            />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-location-dot"></i>
            </label>
            <label class="userinfo-item-tag"> Address2: </label>
            <label class="userinfo-item-var" id="address2">
              {{ account.address2 }}
            </label>
            <input
              type="text"
              class="input-fix"
              id="fix-address2"
              name="address2"
            />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-envelopes-bulk"></i>
            </label>
            <label class="userinfo-item-tag"> Zip: </label>
            <label class="userinfo-item-var" id="zip">
              {{ account.zip }}
            </label>
            <input type="text" class="input-fix" id="fix-zip" name="zip" />
          </div>
          <div class="userinfo-item">
            <label class="userinfo-item-icon">
              <i class="fa-solid fa-phone"></i>
            </label>
            <label class="userinfo-item-tag"> Phone: </label>
            <label class="userinfo-item-var" id="phone">
              {{ account.phone }}
            </label>
            <input type="text" class="input-fix" id="fix-phone" name="phone" />
          </div>
        </div>
      </div>
    </div>

    <bottom></bottom>
  </div>
</template>

<script>
import Bottom from "../common/Bottom.vue";
import Top from "../common/Top.vue";
import { mapState } from "vuex";
export default {
  components: {
    Bottom,
    Top,
  },
  computed: {
    ...mapState({
      account: (state) => JSON.parse(state.account),
      cartList: (state) => JSON.parse(state.cartList),
    }),
    subtotal() {
      if (this.cartList == null || this.cartList.length == 0) return 0;
      let sum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        const element = this.cartList[i];
        sum += element.listPrice;
      }
      return sum;
    },
  },
  methods: {
    payOrder() {},
  },
};
</script>

<style scoped>
@import url(../../assets/css/myaccount.css);
</style>
